<!--
 * @Description: 
 * @Author: Gaq
 * @Date: 2022-10-25 21:32:19
 * @LastEditTime: 2022-10-30 17:51:50
 * @LastEditors: Gaq
-->
<script setup>
import { getCurrentInstance } from "vue";
import { useRoute } from "vue-router";

let titles = ref([]);
const { proxy } = getCurrentInstance();
let preview = ref();

let route = useRoute();
let heritageItem = ref({});
let article = ref({});
onBeforeMount(() => {
  heritageItem.value = JSON.parse(
    decodeURIComponent(localStorage.getItem("itemDetail"))
  );
  article.value = heritageItem.value.detail;
});
// 锚点导航
onMounted(async () => {
  const anchors = proxy.$refs.preview.$el.querySelectorAll("h1,h2,h3,h4,h5,h6");
  titles.value = Array.from(anchors).filter(
    (title) => !!title.innerText.trim()
  );
  if (!titles.value.length) {
    titles.value = [];
    return;
  }
  const hTags = Array.from(
    new Set(titles.value.map((title) => title.tagName))
  ).sort();
  titles.value = titles.value.map((el) => ({
    title: el.innerText,
    lineIndex: el.getAttribute("data-v-md-line"),
    indent: hTags.indexOf(el.tagName),
  }));
  window.addEventListener("scroll", handleScrollx, true);
});
const handleAnchorClick = (anchor) => {
  const { lineIndex } = anchor;
  const heading = proxy.$refs.preview.$el.querySelector(
    `[data-v-md-line="${lineIndex}"]`
  );

  if (heading) {
    proxy.$refs.preview.scrollToTarget({
      target: heading,
      scrollContainer: window,
      top: 60,
    });
  }
};

let nav = ref(null);
let top = ref(null);
let isTop = ref(false);
const handleScrollx = () => {
  // console.log("距离顶部高度", nav.value.getBoundingClientRect().top);
  top.value = nav.value.getBoundingClientRect().top;
  if (top.value === 0) {
    isTop.value = true;
  } else {
    isTop.value = false;
  }
};

onUnmounted(() => {
  // 离开该页面需要移除这个监听的事件，不然会报错
  window.removeEventListener("scroll", handleScrollx, true);
});
watch(
  () => top.value,
  (pev, old) => {
    window.addEventListener("scroll", handleScrollx, true);
  }
);
</script>

<template>
  <div class="contentBox">
    <div class="top"><img :src="heritageItem.image" alt="加载失败" /></div>
    <h1 style="margin-top: 20px; text-align: center">
      {{ heritageItem.name }}
    </h1>
    <el-divider />
    <el-affix :offset="0">
      <div :class="{ style: isTop }">
        <div class="titleNav" ref="nav">
          <div
            v-for="(anchor, index) in titles"
            :key="index"
            @click="handleAnchorClick(anchor)"
          >
            <a>{{ anchor.title }}</a>
            <el-divider
              style="margin-left: 25px"
              v-if="index === titles.length - 1 ? false : true"
              direction="vertical"
            >
            </el-divider>
            <!-- <el-divider direction="vertical" /> -->
          </div>
        </div>
      </div>
    </el-affix>

    <div class="vmd">
      <v-md-preview :text="article" ref="preview"></v-md-preview>
    </div>
  </div>
</template>

<style lang="less" scoped>
.contentBox {
  width: 70%;
  margin: 0 auto;
}
.top {
  height: 350px;
  img {
    width: 100%;
    height: 100%;
  }
}
.titleNav {
  display: flex;
  justify-content: space-around;
  width: 70%;
  margin: 0 auto;
  font-size: 20px;
  a:hover {
    text-decoration: underline;
    color: #972a2a;
    cursor: pointer;
  }
}
.style {
  height: 50px;
  line-height: 50px;
  background-color: antiquewhite;
}
</style>